<h3 class="mbl">Add or Edit Your Profile Picture</h3>
<zzzzzz-ui:message key="msg_success_portrait_settings" type="success"/>
<form:form id="portrait_form" modelAttribute="portraitForm" action="${ctx}/settings/portrait" method="post" enctype="multipart/form-data">
	<form:errors path="*" element="div" cssClass="msg-error"/>
								
	<div class="clearfix">
		<div class="lfloat mrl">
			<c:choose>
				<c:when test="${portraitForm.portraitId == null || empty portraitForm.portraitId}">
					<img src="${ctx}/res/images/default_portrait.png" class="thumb thumb_128"/>
				</c:when>
				<c:otherwise>
					<img src="${ctx}/image/${portraitForm.portraitId}" class="thumb thumb_128"/>
				</c:otherwise>
			</c:choose>
		</div>
		<div class="lfloat" style="width: 355px;">
			<p class="fcl fsm">You can upload JPG, JPEG, GIF, PNG or BMP file.</p>
			<div class="file-upload mbm">
				<label class="upload-input"></label><div class="btn upload-btn">Select File</div>
				<form:input path="files" type="file" style="width:308px;" /><form:errors path="files" />
				
			</div>
			<input class="btn style1 small" type="submit" name="submit" value="Upload picture" />
			<c:if test="${portraitForm.portraitId != null && ! empty portraitForm.portraitId}">
				<a href="${ctx}/settings/remove_portrait" class="mlm">Remove picture</a>
			</c:if>
		</div>
	</div>
</form:form>


<script type="text/javascript">

	jq(document).ready(function() {
		
		var isValueChanged = false;
	
		jq('input[type=file]').change(function(e) {
			isValueChanged = true;
			jq(".upload-input").html(jq(this).val());
		});
		
		jq("#portrait_form").submit(function(e) {
			if(isValueChanged) {
				return true;
			}else {
				var pos_top = jq(this).offset().top;
				jq.notification({ "pos_top" : pos_top, "width" : 256, "message" : "Please select a file to upload." });
				return false;
			}
		});
		
	});

</script>